<template>
  <div class="error-page">
    <el-row type="flex" justify="center" align="middle" class="error-container">
      <el-col :span="12">
        <el-card class="error-card" shadow="always">
          <div class="error-content">
            <el-row justify="center">
              <el-col>
                <el-text class="error-code">404</el-text>
              </el-col>
            </el-row>
            
            <el-row justify="center">
              <el-col>
                <el-text class="error-title">页面未找到</el-text>
              </el-col>
            </el-row>
            
            <el-row justify="center">
              <el-col>
                <el-text class="error-description">
                  抱歉，您访问的管理页面不存在或已被删除
                </el-text>
              </el-col>
            </el-row>
            
            <el-row justify="center" class="error-actions">
              <el-col>
                <el-button type="primary" @click="goHome" round>
                  返回仪表盘
                </el-button>
                <el-button @click="goBack" round>
                  返回上页
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
  router.push('/dashboard')
}

const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.error-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-container {
  width: 100%;
  padding: 20px;
}

.error-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  padding: 40px;
  background: white;
  text-align: center;
}

.error-code {
  font-size: 72px;
  font-weight: 700;
  color: #ec4747;
  line-height: 1;
  margin-bottom: 20px;
}

.error-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.error-description {
  font-size: 16px;
  color: #606266;
  margin-bottom: 32px;
}

.error-actions {
  margin-top: 20px;
}

.error-actions :deep(.el-button) {
  margin: 0 10px;
  padding: 12px 24px;
  font-size: 16px;
}
</style>